<template>
	<view class="list">
		<!-- 头部 -->
		<view class="title">
			<image src="@/static/home/tishi.png"></image>
			<view class="font15 font-7d766b">暂不支持医保支付,如需使用医保支付请持社保卡至自助机或人工窗口。</view>
		</view>
		<!-- 就诊人 -->
		<view class="outpatient">
			<view class="outpatient_box">
				<text class="font17 font-323232 font-b">何承阳</text>
				<view @click="Onmedical">切换就诊人</view>
			</view>
			<view class="outpatient_card font14 font-7d766b">就诊卡:HA2121231</view>
		</view>
		<!-- 数据 -->
		<view class="list_bos">
			<!-- 头部 -->
			<view class="collect_head">
				<view v-for="(item,index) in headlist" :key="index" class="reflect_headbox" @click="Onhead(item)">
					<text :class="headindex == item.id?'head_titlea':'head_titleb'">{{item.title}}</text>
					<view v-if="headindex == item.id"></view>
				</view>
			</view>
			<view class="list_box">
				<view v-for="(item,index) in list" :key="index" class="list_list" @click="Oninfo(item)">
					<view class="list_title">
						<view class="font-323232 font15">{{item.title}}</view>
						<view class="font12 font-7d766b">就诊时间:{{item.time}}</view>
					</view>
					<view class="list_money">
						<view class="font15 font-6bcbb6">{{item.money}}<text class="font-323232">元</text></view>
						<image src="@/static/my/morea.png"></image>
					</view>
				</view>
			</view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="ComPopup_bos">
				<view class="popup_title">
					<view class="popup_time font15 font-323232 font-b">切换接诊人</view>
					<image @click="Onclose" class="popup_img" src="@/static/close.png"></image>
				</view>
				<view class="outpatient_pbos">
					<!-- 开始循环 -->
					<view class="outpatient_Popup">
						<view class="outpatient_Popupbox">
							<text class="font17 font-323232 font-b">何承阳</text>
							<image class="outpatient_image" src="@/static/my/mor_b.png"></image>
						</view>
						<view class="outpatient_card font14 font-7d766b">就诊卡:HA2121231</view>
					</view>
					<view class="outpatient_Popup">
						<view class="outpatient_Popupbox">
							<text class="font17 font-323232 font-b">何承阳</text>
							<!-- <image class="outpatient_image" src="/static/my/mor_b.png"></image> -->
						</view>
						<view class="outpatient_card font14 font-7d766b">就诊卡:HA2121231</view>
					</view>
				</view>
				<!-- 按钮 -->
				<view class="ComPopup_button">
					<view>添加就诊人</view>
					<view>就诊人管理</view>
				</view>
			</view>
		</uni-popup>
	</view>



</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	export default {
		components: {
			uniPopup
		},
		data() {
			return {
				headindex: 'a', //下标显示
				//头部列表
				headlist: [{
						title: '待支付',
						id: 'a'
					},
					{
						title: '已支付',
						id: 'b'
					},
				],
				//数据
				list: [{
						title: '骨科门诊',
						time: '2020-10-12 18:30',
						money: '20.00'
					},
					{
						title: '内科门诊',
						time: '2020-10-12 18:30',
						money: '30.00'
					},
					{
						title: '骨科门诊',
						time: '2020-10-12 18:30',
						money: '20.30'
					},
					{
						title: '内科门诊',
						time: '2020-10-12 18:30',
						money: '30.00'
					},
					{
						title: '骨科门诊',
						time: '2020-10-12 18:30',
						money: '20.00'
					},
					{
						title: '内科门诊',
						time: '2020-10-12 18:30',
						money: '30.30'
					},
					{
						title: '骨科门诊',
						time: '2020-10-12 18:30',
						money: '20.00'
					},
					{
						title: '内科门诊',
						time: '2020-10-12 18:30',
						money: '30.00'
					},
					{
						title: '骨科门诊',
						time: '2020-10-12 18:30',
						money: '20.00'
					},
					{
						title: '内科门诊',
						time: '2020-10-12 18:30',
						money: '30.30'
					},
					{
						title: '骨科门诊',
						time: '2020-10-12 18:30',
						money: '20.00'
					},
					{
						title: '内科门诊',
						time: '2020-10-12 18:30',
						money: '30.30'
					},
					{
						title: '骨科门诊',
						time: '2020-10-12 18:30',
						money: '20.30'
					},
					{
						title: '内科门诊',
						time: '2020-10-12 18:30',
						money: '30.00'
					},
					{
						title: '骨科门诊',
						time: '2020-10-12 18:30',
						money: '20.00'
					},
					{
						title: '内科门诊',
						time: '2020-10-12 18:30',
						money: '20.30'
					}
				],
			}
		},
		methods: {
			//切换接诊人弹窗
			Onmedical() {
				this.$refs.popup.open()
			},
			//关闭弹窗
			Onclose() {
				this.$refs.popup.close()
			},
			//切换
			Onhead(res) {
				this.headindex = res.id
			},
			//跳转页面
			Oninfo(e) {
				if (this.headindex == 'a') {
					uni.navigateTo({
						url: '/pagesA/home/mzpay/staypay',
					})
				}
				if (this.headindex == 'b') {
					wx.navigateTo({
						url: '/pagesA/home/mzpay/info',
					})
				}
			}
		}
	}
</script>

<style>
	.title {
		padding: 30rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: 1rpx #eeeeee solid;
	}

	.title view {
		width: 620rpx;
	}

	.title image {
		width: 40rpx;
		height: 40rpx;
	}

	/* 就诊人 */
	.outpatient {
		width: 750rpx;
		padding: 36rpx 30rpx;
		background-color: #ffffff;
		box-shadow: 0px 0px 50rpx 0px rgba(213, 213, 213, 0.3);

	}

	.outpatient_box {
		display: flex;
		width: 690rpx;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 32rpx;
	}

	.outpatient_box view {
		height: 52rpx;
		width: 168rpx;
		border-radius: 30rpx;
		border: 1rpx #9ddcce solid;
		color: #9ddcce;
		font-size: 22rpx;
		line-height: 52rpx;
		text-align: center;
	}

	/* 数据 */
	.list_bos {
		background-color: #f5f5f5;
		padding-top: 20rpx;
	}

	/* 头部 */
	.collect_head {
		height: 60rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.reflect_headbox {
		height: 50rpx;
	}

	.head_titlea {
		font-size: 30rpx;
		font-weight: 700;
		color: #323232;
	}

	.head_titleb {
		font-size: 30rpx;
		color: #969696;
	}

	.reflect_headbox view {
		height: 5rpx;
		background-color: #6ccbb6;
		border-radius: 3px;
		margin-top: 12rpx;
	}

	.list_box {
		background-color: #ffffff;
	}

	.list_list {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		justify-content: space-between;
		border-bottom: 1rpx #eeeeee solid;
	}

	.list_title {
		width: 500rpx;
	}

	.list_title view:nth-of-type(1) {
		margin-bottom: 10rpx;
	}

	.list_money {
		display: flex;
		align-items: center;
	}

	.list_money image {
		height: 26rpx;
		width: 14rpx;
		margin-left: 30rpx;
	}



	/* 弹窗 */
	.ComPopup_bos {
		background-color: #ffffff;
		border-radius: 30rpx 30rpx 0 0;
	}

	.popup_title {
		position: relative;
		width: 750rpx;
		height: 106rpx;
	}

	.popup_time {
		width: 750rpx;
		text-align: center;
		height: 106rpx;
		line-height: 106rpx;
	}

	.popup_img {
		height: 36rpx;
		width: 36rpx;
		position: absolute;
		top: 35rpx;
		right: 20rpx;
	}

	.outpatient_pbos {
		padding-top: 10rpx;
	}

	.outpatient_Popup {
		width: 750rpx;
		padding: 20rpx 30rpx;
		border-bottom: 1rpx #eeeeee solid;
	}

	.outpatient_Popupbox {
		display: flex;
		width: 690rpx;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 10rpx;
	}

	.outpatient_image {
		height: 30rpx;
		width: 30rpx;
	}

	.ComPopup_button {
		display: flex;
		width: 750rpx;
		height: 100rpx;
		color: #6ccbb6;
		font-size: 30rpx;
	}

	.ComPopup_button view:nth-of-type(1) {
		background-color: #6ccbb6;
		color: #ffffff;
	}


	.ComPopup_button view:nth-of-type(2) {
		background-color: #ffffff;
		color: #6ccbb6;
	}

	.ComPopup_button view {
		width: 50%;
		text-align: center;
		line-height: 100rpx;
	}
</style>
